<div class="layout-px-spacing">


  <div class="row sales layout-top-spacing display-flex">

    <div id="video-column" class="col-xl-9 layout-spacing">
      <div class="widget widget-chart-one">
        <div class="widget-heading">
          <div class="row">
            <div class="col-8">
              <%= live_render(@socket, GlimeshWeb.UserLive.Components.StreamerTitle, id: "streamer-title", session: %{"user" => @user, "streamer" => @streamer}) %>
            </div>
            <div class="col-4">
              <div class="float-right">
                <div class="stream-info btn-toolbar ml-4">
                  <div class="btn-group mr-2" role="group" aria-label="First group">
                    <%= if @streamer.stripe_user_id do %>
                    <%= live_render(@socket, GlimeshWeb.UserLive.Components.SubscribeButton, id: "subscribe-button", session: %{"user" => @user, "streamer" => @streamer}) %>
                    <% end %>
                  </div>
                  <div class="btn-group mr-2" role="group" aria-label="Second group">
                    <%= live_render(@socket, GlimeshWeb.UserLive.Components.FollowButton, id: "follow-button", session: %{"user" => @user, "streamer" => @streamer}) %>
                  </div>
                  <div class="btn-group" role="group" aria-label="Third group">
                    <%= live_render(@socket, GlimeshWeb.UserLive.Components.ViewerCount, id: "viewer-count", session: %{"streamer_id" => @streamer.id}) %>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="widget-content">
          <div class="embed-responsive embed-responsive-16by9">
            <%= if @backend == "ftl" do %>
            <video id="video-player" phx-hook="FtlVideo" data-janus-server-uri="<%= @janus_uri %>"
              data-channel-id="<%= @channel_id %>" poster="/images/stream-not-started.jpg" autoplay controls></video>
            <% else %>
            <div id="player-container" class="embed-responsive-item" phx-hook="OvenVideo">
              <div id="player"></div>
            </div>
            <% end %>
          </div>

          <div class="d-none d-sm-block mt-4">
            <div class="row">
              <div class="col-8">
                <%# live_render(@socket, GlimeshWeb.UserLive.ViewerHeads, id: "viewer-heads", session: %{"user" => @user, "streamer" => @streamer.username, "fake_multiplier" => 12}) %>
              </div>
              <div class="col-4">
                <div class="float-right">
                  <%= live_render(@socket, GlimeshWeb.UserLive.Components.ReportButton, id: "report-button", session: %{"user" => @user, "streamer" => @streamer}) %>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="chat-column" class="col-xl-3 layout-spacing">
      <%= live_render @socket, GlimeshWeb.ChatLive.Index, id: "chat", session: %{"user" => @user, "streamer" => @streamer} %>
    </div>

  </div>

  <div class="row">
    <div class="col-xl-9 layout-spacing">
      <div class="widget widget-chart-one">
        <div class="widget-heading">
          <h3>About <%= @streamer.displayname %>'s Stream</h3>
        </div>
        <div class="widget-content">
          <%= if @streamer.profile_content_html do %>
          <%= raw(@streamer.profile_content_html) %>
          <% else %>
          <p>
            <%= gettext("Welcome to my profile! I haven't customized it yet, but I can easily do that by clicking my username up in the left hand corner!") %>
          </p>
          <% end %>
        </div>
      </div>
    </div>
    <div class="col-xl-3 layout-spacing">
      <div class="widget widget-chart-one">
        <div class="widget-content">
          <%= if @channel.chat_rules_html do %>
            <%= raw(@channel.chat_rules_html) %>
          <% else %>
            <h3>Chat Rules</h3>
            <p>1. <strong>Hate Speech</strong> - Hate Speech is not tolerated by Glimesh under any circumstances. Any
              message that promotes, encourages, or facilitates discrimination, denigration, objectification, harassment,
              or violence based on race, age, sexuality, physical characteristics, gender identity, disability, military
              service, religion and/or nationality will be considered hate speech is prohibited. We also don't allow for
              the hateful use of racial or misogynistic slurs. If you have to question whether your message violates this
              rule, don't send it.</p>
            <p>2. <strong>Harassment</strong> - We want you, as a member of our community, to feel safe and respected so
              you can engage and connect with others. Harassment or bullying of other community members or the streamer
              will not be tolerated. Harassment is considered any message or activity with the intention to intimidate,
              degrade, abuse, or bully others, or creates a hostile environment for others. Telling the streamer or
              another user to "kill yourself" is unacceptable. If the streamer or another community member asks you not to
              make certain remarks, and you continue, that is harassment. If the streamer's rules say such comments are
              not welcome, it is harassment.</p>
            <p>3. <strong>Threats & Violence</strong> - All threats will be taken seriously by the moderators and Glimesh
              team. This includes threats of harm to others, threats of swatting, threats of doxing, threats of DDoS and
              threats of harassment.</p>
            <p>4. <strong>Spam</strong> - No one likes spam. Spam is considered posting large amounts of repetitive,
              unwanted messages in a short amount of time.</p>
            <p>5. <strong>Personal Information</strong> - Posting personal information about others without their consent
              ( “doxxing") is not allowed. It is prohibited to share content that may reveal private personal information
              about individuals, or their private property, without permission.</p>

            <p>Any violation to the above rules will result in your comment being removed from the chat and an automatic
              <strong>ban for the remainder of the charity stream event</strong>. Serious violations may result in a ban
              from future events.</p>
            <% end %>
        </div>
      </div>
    </div>
  </div>

</div>
